<script>
import {updatePassword, updateUser, userDetail} from "../../../api/user";
import {ElMessage} from "element-plus";
import {uploadImage} from "../../../api/file";

export default {
    name: "UpdatePassword",
    data() {
        return {
            editBox: new Map(),
            user: {},
            file: null,
            rePassword:''
        }
    },

    methods: {
        showEdit(key) {
            var old = this.editBox.get(key);
            this.editBox.set(key, !old)
        },
        getUser() {
            if (!this.$store.state.user) {
                const id = this.$store.state.userInfo.userId
                userDetail(id)
                    .then(res => {
                        if (res.code === 200) {
                            this.$store.commit('setUser', res.data)
                            this.user = res.data
                        }
                    })
            } else this.user = this.$store.state.user
        },
        back() {
            this.$router.back()
        }
    },
    created() {
        this.getUser()
    }
}
</script>

<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div style="width: 100%">
                <h2>修改手机号</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex row align-center" style="width: 100%;cursor: pointer;margin:0 0 1em 0" @click="back">
                <i class="iconfont icon-back" style="font-size: 17pt"></i>
                <span>返回上一层</span>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <span>
                    此功能未发布
                    请谨慎修改手机号
                    <br>
                    该系统未启动手机号验证，一切使用邮箱
                </span>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <el-input v-model="user.oldPassword" placeholder="新手机号" style="width: 300px"></el-input>
            </div>
            <div class="flex row  space-between" style="margin-bottom: 1em;width: 300px">
                <el-input v-model="user.verifyCode" placeholder="验证码" style="width: 150px"/>
                <el-button >发送验证码</el-button>
            </div>
            <div class="flex flex-end" style="width: 300px;margin-top: 1rem">
                <el-button style="width: 100%" @click="update">提交修改</el-button>
            </div>


        </div>
    </div>
</template>

<style lang="scss" scoped>
.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}
</style>
